<template>
    <div :class="{'scaneMain':true,'isBig':isLrb=='Y' ? true:false}">
      
        <div class="scaneContent" ref="scaneContent">
        
            <div v-for="(item2,index2) in listText" :key="index2" class="items">
                <div v-for="(item,index) in item2" :key="index">
                    <div v-if="item.type=='text'" v-html="item.text" class="items_text">
                    </div>
                    <div v-if="item.type=='view'">
                        <!--viewSimple :filename="item.filename" :sId="item.sId" ></viewSimple-->
                    </div>
                </div>
            </div>
            
        </div>
        
        <div class="scanbar">
            <input type="text" class="scanbarInput"  v-model="sCode" v-myfocus="true" id="sCodeInput" autofocus="true"  ref="sCodeInput" @keyup.enter="scane()"   @focus="stopKeyborad" @blur="stopKeyborad" />
           
        </div>
       
        
        <div style="height:10px"></div>
       
        <div style="display:flex;flex-direction: row;width:100%">
            <div  v-for="(item,index2) in bars" :class="index==index2 ? 'active_btn':'noactive_btn'" :key="index2" @click="onChange(index2)" style="flex:1;text-align:center;padding:10px;border:1px solid #ddd;cursor:pointer">{{item.label}}</div>
        </div>
        <!--van-tabbar v-model="barActive"  @change="onChange">
            <van-tabbar-item :icon="item.icon" v-for="(item,index) in bars" :key="index" >{{item.label}}</van-tabbar-item>
        </van-tabbar-->

         
    </div>
</template>
<script>

export default {
   
    data(){
        return{
            keyCode:"",
            sCodes:"",
           /* listText:[[{
                "type":"text",
                "text":"二维码xxxxxxxxxxxxljsdlfjjlsdflsdfklsdfsdlfjdslfjldsjflkdsjflkjsdflkdsjflskdjflkdsjflkdsjflkdsflksdflskdf"
            }]],*/
            listText:[],
            model:"",
            key:"",
            title:"",
            showBar:false,
            barActive:0,
            bars:[],
            step:0,
            index:0,
            sCode:"",
            isLrb:"",
            status:false,
            showScane:false
        }
        
        
    },
    
    created(){
        
        let query=this.$route.query;
        this.model=query.model;
        this.key=query.model_key;

        this.loadData();
        
        if(sessionStorage.getItem("isLrb")){
            this.isLrb=sessionStorage.getItem("isLrb");
        }
        let that=this;
        window.onresize = ()=>{
            return(()=>{
                
                setTimeout(() => {
                    that.$refs.sCodeInput.setAttribute('readonly', true);
                   // that.$refs.sCodeInput.removeAttribute('readonly');
                }, 100);
                setTimeout(() => {
                    
                    that.$refs.sCodeInput.removeAttribute('readonly');
                }, 200);
                console.log("resize===================================================")
                        //键盘弹起与隐藏都会引起窗口的高度发生变化
             
            })()
                
        }
    },
    mounted() {
       // document.body.focus();
       let that=this;
        window.addEventListener('keyup', this.handleEvent)
        window.setTimeout(function(){
            that.$refs.sCodeInput.focus();
           
        },1500)
    },
    beforeDestroy() {
        window.removeEventListener('keyup', this.handleEvent) // 页面销毁的时候解除
    },
    activated(){
        let query=this.$route.query;
        let model=query.model;
        let key=query.key;
        if(model!=this.model||key!=this.key){
            this.model=model;
            this.key=key;
            this.listText=[];
            this.loadData();
        }
        console.log(this.model+"="+this.key)
       
       
        let that=this;
        that.$refs.scaneContent.scrollTop= that.$refs.scaneContent.scrollHeight
        
        this.$post("business","/api/view/commonScaneView",{"model":this.model,"key":this.key}).then(data=>{
            this.title=data[0].title;
            this.bars=data;
            if(this.bars.length>1){
                this.showBar=true;
            }
        });
        
        this.$nextTick(() => {
            console.log("actived1=================================")
            try{
                console.log(this.$refs.sCodeInput)
                this.$refs.sCodeInput.focus();

                
            }catch(e){}
        });
       
    },
    watch:{
        sCode(val){
           
        }
    },
    methods: {
        scane(){
            
            let sCode=this.sCode.replace("sn","").replace("SN","");
            this.sCode="";
            this.keyCode=""; 
            
            
            let item=JSON.parse(JSON.stringify(this.bars[this.index].items[this.step-1]));
            let title2=item.title2.replace("sCode",sCode);
            let item_=this.listText[this.listText.length-1]
            item_.push({
                "text":title2,
                "type":"text"
            });
            console.log(item,"items====")
            let post=item.post;
            let postLast=item.postLast;
            let confirm=item.confirm;
            let filenamePost=item.filenamePost;//编辑界面扫码路径
            let filename=item.filename;
            let target=item.target
            this.sCodes=this.sCodes=="" ? sCode:this.sCodes+","+sCode;
            console.log("sCode111================"+this.sCodes);
            
            sessionStorage.setItem("filenamePost",filenamePost);
            if(post){
                // console.log("this.sCodes============"+this.sCodes+"="+sCode+"=="+post)
                this.$post("",post,{
                    sCode:sCode,
                    sCodes:this.sCodes
                }).then(data=>{
                    if(data.msg){
                        item_.push({
                            "text":unescape(data.msg),
                            "type":"text"
                        });
                    }
                    
                    if(data.status=="200"){
                        if(filename){
                            if(target=="blank"){
                    
                                let timestape=new Date().getTime()
                                router.push({path:"/commonEdit",query:{filename:filename,sId:sCode,times:timestape}})
                            }else{
                                item_.push({
                                    "filename":filename,
                                    "sId":sCode,
                                    "type":"view"
                                });
                            }
                            if(postLast){
                                this.$post("",postLast,{
                                    sCode:sCode,
                                    sCodes:this.sCodes
                                }).then(data=>{
                                    if(data.msg){
                                        item_.push({
                                            "text":unescape(data.msg),
                                            "type":"text"
                                        });
                                    }
                                    if(data.status=="200"){
                                        this.changeItem();
                                            
                                    }else if(data.status=="500"){
                                        this.step=0;
                                        this.changeItem(); 
                                        this.myUni.webView.postMessage({  
                                            data: {  
                                                action: "vibrateLong" 
                                            }
                                        });
                                    }else if(data.status=="400"){
                                        let index=this.sCodes.lastIndexOf(",");
                                        this.sCodes=this.sCodes.substring(0,index)
                                        this.myUni.webView.postMessage({  
                                            data: {  
                                                action: "vibrateLong" 
                                            }
                                        });
                                    }

                                });

                            }else
                                this.changeItem();
                        }else{
                            if(postLast){
                                this.$post("",postLast,{
                                    sCode:sCode,
                                    sCodes:this.sCodes
                                }).then(data=>{
                                    if(data.msg){
                                        item_.push({
                                            "text":unescape(data.msg),
                                            "type":"text"
                                        });
                                    }
                                    if(data.status=="200"){
                                        this.changeItem();
                                            
                                    }else if(data.status=="500"){
                                        this.step=0;
                                        this.changeItem(); 
                                        this.myUni.webView.postMessage({  
                                            data: {  
                                                action: "vibrateLong" 
                                            }
                                        });
                                    }else if(data.status=="400"){
                                        let index=this.sCodes.lastIndexOf(",");
                                        this.sCodes=this.sCodes.substring(0,index)
                                        this.myUni.webView.postMessage({  
                                            data: {  
                                                action: "vibrateLong" 
                                            }
                                        });
                                    }

                                });

                            }else
                                this.changeItem();
                        }
                    }else if(data.status=="500"){
                        this.step=0;
                        this.changeItem(); 
                        this.myUni.webView.postMessage({  
                            data: {  
                                action: "vibrateLong" 
                            }
                        });
                    }else if(data.status=="400"){
                        let index=this.sCodes.lastIndexOf(",");
                        this.sCodes=this.sCodes.substring(0,index)
                        this.myUni.webView.postMessage({  
                            data: {  
                                action: "vibrateLong" 
                            }
                        });
                    }
                });
            }else if(filename){
                if(target=="blank"){
                    
                    let timestape=new Date().getTime()
                    router.push({path:"/commonEdit",query:{filename:filename,sId:sCode,times:timestape}})
                }else{
                    item_.push({
                        "filename":filename,
                        "sId":sCode,
                        "type":"view"
                    });
                }
                
                
                if(confirm){
                    Dialog.confirm({
                        title: '提示',
                        message: confirm,
                    }).then(() => {
                        // on confirm
                        
                        if(postLast){
                            this.$post("",postLast,{
                                sCode:sCode,
                                sCodes:this.sCodes
                            }).then(data=>{
                                if(data.msg){
                                    item_.push({
                                        "text":unescape(data.msg),
                                        "type":"text"
                                    });
                                }
                                if(data.status=="200"){
                                    this.changeItem();
                                        
                                }else if(data.status=="500"){
                                    this.step=0;
                                    this.changeItem(); 
                                    this.myUni.webView.postMessage({  
                                        data: {  
                                            action: "vibrateLong" 
                                        }
                                    });
                                }else if(data.status=="400"){
                                    let index=this.sCodes.lastIndexOf(",");
                                    this.sCodes=this.sCodes.substring(0,index)
                                    this.myUni.webView.postMessage({  
                                        data: {  
                                            action: "vibrateLong" 
                                        }
                                    });
                                }

                            });
                        }else{
                            this.changeItem();
                        }
                    }).catch(() => {
                        // on cancel
                    });
                }else{
                    this.changeItem();
                }
                
            }else{
                this.changeItem();
            }
            
            
            
            this.$nextTick(()=>{
                this.$refs.scaneContent.scrollTop= this.$refs.scaneContent.scrollHeight
            })
            let that=this;
            window.setTimeout(function(){
                that.$refs.scaneContent.scrollTop= that.$refs.scaneContent.scrollHeight
            },1000)
            window.setTimeout(function(){
                that.$refs.scaneContent.scrollTop= that.$refs.scaneContent.scrollHeight
            },1000)
        },
        openScan(){
            this.showScane=true
        },  
        qrReader(data){
            this.sCode=data+"SN";
            this.showScane=false;
        },  
        onShows(){
            console.log("onShows=======================")
        },  
        keyups(event){
            console.log(event)
        },  
        onClickRight(){
            window.location.reload();
        },
        loadData(){
           
            this.sCode="";
            this.sCodes="";
            this.$post("business","/api/view/commonScaneView",{"model":this.model,"key":this.key}).then(data=>{
                this.title=data[0].title;
                this.bars=data;
                if(this.bars.length>1){
                    this.showBar=true;
                }
                let items=[];
                items.push({
                    "type":"text",
                    "text":data[0].items[0].title
                })
                this.listText.push(items)
                this.step=1;
                
            });
        },
         
        handleEvent(event) {
           if(event.keyCode>0){
                if(event.keyCode==16)
                    return;
                if(String.fromCharCode(event.keyCode)!=undefined)
                    this.keyCode=this.keyCode+String.fromCharCode(event.keyCode)
                if(event.keyCode==78){
                    
                }
           }
           
        },
        changeItem(){
            if(this.bars[this.index].items.length>this.step){
                this.step++;
            }else{
                this.step=1;
                this.sCodes="";
            }
            if(this.step==1)
                this.sCodes="";
            let item=JSON.parse(JSON.stringify(this.bars[this.index].items[this.step-1]));
            let item_=[];
            if(this.step>1){
                item_=this.listText[this.listText.length-1];
            }
            item_.push({
                "text":item.title,
                "type":"text"
            });
            if(this.step==1){
                this.listText.push(item_)
            }
            this.$nextTick(()=>{
                this.$refs.scaneContent.scrollTop= this.$refs.scaneContent.scrollHeight
            })
        },
        onChange(index){
            /*this.myUni.webView.postMessage({  
                data: {  
                    action: "vibrate" 
                }
            });*/
            console.log(this.bars)
            this.index=index;
            this.step=1;
            this.sCodes="";
            let items=[];
            items.push({
                "type":"text",
                "text":this.bars[index].items[0].title
            })
            this.listText.push(items)
            this.$nextTick(()=>{
                this.$refs.scaneContent.scrollTop= this.$refs.scaneContent.scrollHeight
            })

        },
        stopKeyborad (e) {
            //尝试一下
            e.target.setAttribute('readonly', true);
            setTimeout(() => {
                e.target.removeAttribute('readonly');
            }, 100);
            console.log("sCode==============================")
            
            this.$refs.sCodeInput.focus();
        }
    }

}
</script>
<style scoped>
    .isBig{
        font-size:25px;
    }
    .scaneMain{
        width:100%;
        height:100%;
        display: flex;
        flex-direction: column;
        background:#ebedf0;
    }
    .scaneContent{
        flex:1;
        overflow:auto;
        padding:10px;
        box-sizing: border-box;
    }
    .items{
        margin:5px;
        box-sizing: border-box;
        background:#fff;
        padding:2px;
        border-radius: 5px;
    }
    .items_text{
        width:100%;
        word-break: break-all;
        white-space: pre-wrap;
    }
    .scanbar{
        display:flex;
        flex-direction: row;
    }
    .scanbarInput{
        flex:1;
    }
    .dialogs{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:#fff;
        z-index:10000;
        display:flex;
        flex-direction: column;
    }
    .active_btn{
        background:rgb(45, 139, 240);
        color:#fff;
    }
    .noactive_btn{
        background:#ddd;
    }
    .scane_title{
        height:40px;
        background:rgb(45, 139, 240);
        color:#fff;
        text-align:center;
        line-height:40px;
    }
    .scane_bar{
        border-top:1px solid #ddd;
        height:40px;
        text-align:center;
        line-height:40px;
    }
</style>
<style>
    .van-nav-bar{
        background:rgb(45, 139, 240);
        color:#fff;
    }
    .van-nav-bar__title{
        color:#fff;
    }
    .van-nav-bar__left{
        color:#fff;
    }
    .van-nav-bar__right{
        color:#fff;
    }
    .van-nav-bar .van-icon{
      color:#fff;
    }
    .van-nav-bar__text{
        color:#fff;
    }
    </style>